<template>
  <ul class="tab-bar">
    <router-link
      v-for="item in tabItems"
      :key="item.path"
      :to="item.path"
      tag="li">
      <i class="iconfont" v-html="item.meta.icon"></i>
      <span>{{item.meta.title}}</span>
    </router-link>
  </ul>
</template>

<script>
import routes from '@/router/routes'

export default {
  name: 'TabBar',
  computed: {
    // 待渲染的 tab 项数据
    tabItems() {
      return routes.filter(route => route.meta?.inTabbar) // 可选链   ??(空值合并)
      // return routes.filter(route => route.meta && route.meta.inTabbar)
      // ?. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
    },
  },
}
</script>

<style lang="scss" scoped>
  .tab-bar {
    display: flex;
    border-top: 1px solid #eee;
    height: 96px;

    li {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }
  }

  .router-link-exact-active, .router-link-active {
    color: #f00;
  }
</style>
